<template>
    <el-container style="min-height: 100vh">
        <!-- 侧边栏 -->
        <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" style="padding-bottom: 20px;"/>
        </el-aside>
        <el-container>
            <!-- 页头 -->
            <el-header style="border-bottom: 1px solid #ccc;
		   background-color: white;
           position: relative;
           height: 60px; ">
                <Header @asideCollapse="collapse" :collapseBtnClass="collapseBtnClass"></Header>
            </el-header>

            <el-main style="
			position: absolute;
			background-color: #F3F4F7;
			left: 200px;
			right: 0;
			top: 60px;
			bottom: 0;
			overflow-y: scroll;">
                <!--        表示当前页面的子路由会在 <router-view /> 里面展示-->
                <router-view>
                </router-view>
            </el-main>

        </el-container>
    </el-container>
</template>

<script>
    import Aside from '../components/Aside.vue'
    // @符号表示src目录
    import Header from "@/components/Header";

    export default {
        name: 'HomePage',
        components: {
            Aside,
            Header
        },
        data() {
            return {
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
            }
        },
        methods: {
            collapse() {  // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {  // 收缩
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else {   // 展开
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            }
        }

    }
</script>

<style>
</style>